<template>
	<view class="app l_pages">
		<jnavbar :title="'文章列表'" :PageId="12"></jnavbar>
		<scroll-view class="page_container" scroll-y>
			<v-tabs
				v-model="a_id"
				:tabs="list"
				:field="'name'"
				:pills="true"
				:activeColor="'#fff'"
				:pillsColor="'#ff3c29'"
				:pillsBorderRadius="'60rpx'"
				:height="'60rpx'"
				:paddingItem="'0 30rpx'"
				:padding="'0'"
				:scroll="true"
				@change="change"
			></v-tabs>
			<view class="list">
				<view @click="todetail(item.id)" class="item uni-flex-row" v-for="(item, i) in articlelist" :key="i">
					<vimage class="img_box" :src="item.headimg"></vimage>
					<view class="content uni-flex-column">
						<view class="title uni-flex-column">
							<text class="lg-font">{{ item.title }}</text>
							<text class="sm-font">{{ item.subhead }}</text>
						</view>
						<view class="time">
							<text class="sm-font">{{ item.create_time }}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<uni-login ref="Login" @callback="logincallback"></uni-login>
		<tab-bar ref="tabbar" :PageId="12"></tab-bar>
	</view>
</template>

<script>
import {mapState, mapMutations} from 'vuex';
export default {
	onShareAppMessage() {
		return this.wxShare();
	},
	data() {
		return {
			list: [],
			a_id: 0,
			page: 1,
			size: 10,
			articlelist: []
		};
	},
	computed: {
		...mapState({
			hastabbar: state => state.hastabbar
		})
	},
	async onLoad() {
		await this.$getWx
		this.articletype();
	},
	onPullDownRefresh() {
		this.articlelist=[]
		this.page=1;
		this.getarticlelist()
	},
	methods: {
		todetail(id) {
			this.Jumpurl({
				type: 1,
				link: '../article/detail?id=' + id,
				login_type: 1
			});
		},
		change(e) {
			this.type = this.list[e].id;
			this.articlelist = [];
			this.page = 1;
			this.getarticlelist();
		},
		logincallback() {},
		getarticlelist() {
			let data = {
				type: this.type
			};
			this.$http('/article/list?page=' + this.page + '&size=' + this.size, data, 'POST').then(res => {
				uni.stopPullDownRefresh()
				let list = res.data.msg.data;
				this.articlelist = this.articlelist.concat(list);
			});
		},
		articletype() {
			this.$http('/article/type', {}, 'GET').then(res => {
				this.list = res.data.msg;
				this.change(0);
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.list {
	.item {
		margin: 20rpx;
		background: #fff;
		padding: 20rpx;
		.content {
			height: 120rpx;
			margin-left: 20rpx;
			justify-content: space-between;

			.title {
				text {
					box-sizing: border-box;

					text-overflow: ellipsis;
					overflow: hidden;
					display: inline-block;
					width: 410rpx;
					white-space: nowrap;
				}
				.sm-font {
					color: #c0c0c0;
				}
			}
			.time {
				color: #cccccc;
			}
		}
		.img_box {
			width: 240rpx;
			height: 120rpx;
			image {
				border-radius: 10rpx;
			}
		}
	}
}
</style>
